<template>
    <a-row :gutter="[16, 16]">
        <a-col :span="item.span" v-for="(item, i) in list" :key="item.name">
            <component
                :is="item.name"
                :id="item.id"
                :ref="
                    (el) => {
                        if (el) divs[i] = el;
                    }
                "
            />
        </a-col>
    </a-row>
</template>
  
<script>
import {
    defineComponent,
    onBeforeUpdate,
    onMounted,
    ref,
    watchEffect,
} from "vue";
import EchartsPicClassify from "./components/echarts-pic-classify.vue";
import EchartsPicType from "./components/echarts-pic-type.vue";
import * as echarts from "echarts";
export default defineComponent({
    name: "Main",
    components: { EchartsPicClassify, EchartsPicType },
    setup() {
        const list = [
            { span: 12, name: "EchartsPicClassify", id: "picClassify" },
            { span: 12, name: "EchartsPicType", id: "picType" },
        ];
        const divs = ref([]);
        onMounted(() => {
            let charts = [];
            watchEffect(() => {
                for (let i = 0; i < divs.value.length; i++) {
                    const e = divs.value[i];
                    let myChart = echarts.init(
                        document.getElementById(list[i].id)
                    );
                    myChart.setOption(e.option);
                    charts.push(myChart);
                }
            });
            window.onresize = () => {
                for (let i = 0; i < charts.length; i++) {
                    charts[i].resize();
                }
            };
        });
        onBeforeUpdate(() => {
            divs.value = [];
        });
        return { list, divs };
    },
});
</script>

<style>
</style>